<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #focus {
            overflow: hidden;
            width: 520px;
            height: 280px;
            margin: 20px auto;
            position: relative;
            border-radius: 12px;
        }

        #focus .imgs {
            width: 2600px;
            overflow: hidden;
            position: absolute;
        }

        #focus .imgs .img {
            float: left;
            width: 520px;
            height: 280px;
        }

        #focus .imgs .img img {
            width: 100%;
        }

        .nav {
            position: absolute;
            top: 50%;
            width: 50px;
            height: 50px;
            margin-top: -25px;
            opacity: 0;
            cursor: pointer;
            z-index: 9;
        }

        #focus .n-left {
            left: 0;
            background-color: #ccc;
            border-radius: 0 50% 50% 0;
        }

        #focus .n-right {
            background-color: #ccc;
            right: 0;
            border-radius: 50% 0 0 50%;
        }

        #focus .nav:hover {
            opacity: 1;
        }

        #focus .num {
            position: absolute;
            left: 50%;
            width: 80px;
            height: 10px;
            margin-left: -40px;
            bottom: 20px;
        }

        #focus .num li {
            width: 10px;
            height: 10px;
            margin-right: 6px;
            border-radius: 50%;
            background-color: #fff;
            float: left;
            cursor: pointer;
        }

        #focus .num li:hover {
            background-color: red;
        }

        #focus .num .on {
            background-color: red;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
    </style>
    <script src="../lib/jquery-1.11.3.min.js"></script>
</head>

<body>
    <!-- 可视区 -->
    <div id="focus">
        <!-- 左侧导航 -->
        <img src="imgs/le.png" class="nav n-left" alt="">
        <!-- 图片区 -->
        <div class="imgs">
            <div class="img"><img src="imgs/p1.jpg" alt=""></div>
            <div class="img"><img src="imgs/p2.jpg" alt=""></div>
            <div class="img"><img src="imgs/p3.jpg" alt=""></div>
            <div class="img"><img src="imgs/p4.jpg" alt=""></div>
            <div class="img"><img src="imgs/p5.jpg" alt=""></div>
        </div>
        <ul class="num">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 右侧导航 -->
        <img src="imgs/ri.png" class="nav n-right" alt="">
    </div>
    <script>
        // 1.先获取全部要操作的对象
        var $left = $('.n-left')
        var $right = $('.n-right')
        var $imgs = $('.imgs')
        var $lis = $('.num li')
        var $width = 520
        var i = 0
        var $len = $('.img').length

        // 2.绑定左右两边按钮事件
        function moveImg(x) {
            if (x == 1) {
                console.log('左')
                i--
                var pos = 0
                if (i < 0) {
                    i = $len - 1
                    pos = -(i * $width)
                    $imgs.css({ 'left': pos + 'px' })
                } else {
                    pos = -(i * $width)
                    $imgs.stop().animate({ 'left': pos + 'px' })
                }
                $('.num li').eq(i).addClass('on').siblings().removeClass('on')
            } else {
                console.log('右')
                i++
                var pos = 0
                if (i < $len) {
                    pos = -(i * $width)
                    $imgs.stop().animate({ 'left': pos + 'px' })
                } else {
                    i = 0
                    $imgs.css({ 'left': pos + 'px' })
                }
                $('.num li').eq(i).addClass('on').siblings().removeClass('on')
            }

        }

        $left.on('click', function () {
            moveImg(1);
        })

        $right.on('click', function () {
            moveImg(2);
        })

        // 自动播放
        var task = setInterval(function () {
            moveImg(2);
        }, 3000)

        function spot(){
            var i = $(this).index()
            console.log(i)
            var pos = 0
            pos = -(i * $width)
            $imgs.stop().animate({ 'left': pos + 'px' })
            $(this).addClass('on').siblings().removeClass('on')
        }
        // 小点的移动事件
        $('.num li').hover(function () {
            spot()
            clearInterval(task)
        }, function () {
            task = setInterval(function () {
            moveImg(2);
        }, 3000)
        })
    </script>
</body>

</html>